<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item :label="$t('单据编号')" prop="documentNumber">
        <el-input v-model="queryParams.documentNumber" :placeholder="$t('通用_请输入') + $t('单据编号')" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('生产工单')" prop="productionOrder">
        <el-input v-model="queryParams.productionOrder" :placeholder="$t('通用_请输入') + $t('生产工单')"  clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item :label="$t('批次号')" prop="batchNumber">
        <el-input v-model="queryParams.batchNumber" :placeholder="$t('通用_请输入') + $t('批次号')"  clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('通用_搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('通用_重置') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['system:outbound:add']">{{ $t('通用_新增') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['system:outbound:edit']">{{ $t('通用_修改') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['system:outbound:remove']">{{ $t('通用_删除') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['system:outbound:export']">{{ $t('通用_导出') }}</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="outboundList" @selection-change="handleSelectionChange">
      <el-table-column  type="selection" width="55" align="center" />
      <el-table-column :label="$t('单据编号')"  align="center" prop="documentNumber" />
      <el-table-column :label="$t('生产工单')"  align="center" prop="productionOrder" />
      <el-table-column :label="$t('业务类型')"  align="center" prop="businessType" />
      <el-table-column :label="$t('物料编码')"  align="center" prop="partNumber" />
      <el-table-column :label="$t('物料名称')"  align="center" prop="materialName" />
      <el-table-column :label="$t('物料规格')"  align="center" prop="itemSpecifications" />
      <el-table-column :label="$t('实际数量')"  align="center" prop="actualQuantity" />
      <el-table-column :label="$t('单位')"  align="center" prop="unit" />
      <el-table-column :label="$t('存储位置')"  align="center" prop="storageLocation" />
      <el-table-column :label="$t('确认日期')"  align="center" prop="confirmationDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.confirmationDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('业务日期')"  align="center" prop="businessDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.businessDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('单据类型')"  align="center" prop="documentType" />
      <el-table-column :label="$t('创建人')"  align="center" prop="creator" />
      <el-table-column :label="$t('批次号')"  align="center" prop="batchNumber" />
      <el-table-column :label="$t('发货时间')"  align="center" prop="dispatchTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.dispatchTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')"  align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['system:outbound:edit']">{{ $t('通用_修改') }}</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['system:outbound:remove']">{{ $t('通用_删除') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />




    <!-- 添加或修改原材出库对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('单据编号')" prop="documentNumber">
              <el-input v-model="form.documentNumber" :placeholder="$t('通用_请输入') + $t('单据编号')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('生产工单')" prop="productionOrder">
             <el-select
                v-model="form.productionOrder"
                placeholder="生产工单"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="order in workorderList"
                  :key="order.productionOrder"
                  :label="order.productionOrder"
                  :value="order.productionOrder"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('批次号')" prop="batchNumber">
              <el-select
                 v-model="form.batchNumber"
                 placeholder="批次号"
                 clearable
                 style="width: 240px"
                 @change="selectionChange"
               >
                 <el-option
                   v-for="instock in instockList"
                   :key="instock.id"
                   :label="instock.inventoryLotNumber"
                   :value="instock.inventoryLotNumber"
                 />
               </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('物料编码')" prop="partNumber">
              <el-input v-model="form.partNumber" :placeholder="$t('通用_请输入') + $t('物料编码')"  disabled/>
            </el-form-item>
          </el-col>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('物料名称')" prop="materialName">
              <el-input v-model="form.materialName"  :placeholder="$t('通用_请输入') + $t('物料名称')" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('物料规格')" prop="itemSpecifications">
              <el-input v-model="form.itemSpecifications" :placeholder="$t('通用_请输入') + $t('物料规格')"  disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('实际数量')" prop="actualQuantity">
              <el-input v-model="form.actualQuantity" :placeholder="$t('通用_请输入') + $t('实际数量')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('单位')" prop="unit">
              <el-input v-model="form.unit" :placeholder="$t('通用_请输入') + $t('单位')" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('存储位置')" prop="storageLocation">
              <el-input v-model="form.storageLocation" :placeholder="$t('通用_请输入') + $t('存储位置')" disabled  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('确认日期')" prop="confirmationDate">
              <el-date-picker clearable v-model="form.confirmationDate" type="date" value-format="yyyy-MM-dd"
               :placeholder="$t('通用_请选择') + $t('确认日期')" >
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('业务日期')" prop="businessDate">
              <el-date-picker clearable v-model="form.businessDate" type="date" value-format="yyyy-MM-dd"
                :placeholder="$t('通用_请选择') + $t('业务日期')"  >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('创建人')" prop="creator">
              <el-input v-model="form.creator" :placeholder="$t('通用_请输入') + $t('创建人')"   />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('发货时间')" prop="dispatchTime">
              <el-date-picker clearable v-model="form.dispatchTime" type="date" value-format="yyyy-MM-dd"
                :placeholder="$t('通用_请选择') + $t('发货时间')" >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ $t('通用_确定') }}</el-button>
        <el-button @click="cancel">{{ $t('通用_取消') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listOutbound,
    getOutbound,
    delOutbound,
    addOutbound,
    updateOutbound
  } from "@/api/system/outbound";
import { listWorkorder, getWorkorder, delWorkorder, addWorkorder, updateWorkorder } from "@/api/system/workorder";
  import {
    listInstock,
    getInstock,
    delInstock,
    addInstock,
    updateInstock
  } from "@/api/system/instock";
  export default {
    name: "Outbound",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 原材出库表格数据
        outboundList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          groupId: null,
          documentNumber: null,
          productionOrder: null,
          businessType: null,
          partNumber: null,
          materialName: null,
          itemSpecifications: null,
          actualQuantity: null,
          unit: null,
          storageLocation: null,
          confirmationDate: null,
          businessDate: null,
          documentType: null,
          creator: null,
          batchNumber: null,
          dispatchTime: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        workorderList: [],
        instockList: [],
        selectedValue: null,

      };
    },
    created() {
      this.getList();
      this.getOrder();
      console.log("1111");
      this.getIn();
    },
    methods: {
      selectionChange() {

          console.log("1111"+JSON.stringify(this.instockList));
          let selectedItem;
          for (let i = 0; i < this.instockList.length; i++) {
            if(this.instockList[i].inventoryLotNumber === this.form.batchNumber)
              selectedItem = this.instockList[i];
              break;
          }
          if (selectedItem) {
             this.form.partNumber = selectedItem.partNumber;
             this.form.materialName = selectedItem.materialName;
             this.form.itemSpecifications = selectedItem.materialSpecifications;
             this.form.storageLocation = selectedItem.storageLocation;

          }


          // 查找选中的项
          // const selectedItem = this.instockList.find(item => item.batchNumber === this.form.batchNumber);
          // 获取自动带出的值
          console.log("222"+JSON.stringify(selectedItem));
      },

      // 获取原材信息
      getIn(){
        let paramsIn;
        listInstock(paramsIn).then(response => {
          this.instockList = response.rows;
        });
      },
      // 获取工单信息
      getOrder(){
      let Params = { state: "open" };
      listWorkorder(Params).then(response => {
        this.workorderList = response.rows;
      });
      },

      /** 查询原材出库列表 */
      getList() {
        this.loading = true;
        listOutbound(this.queryParams).then(response => {
          this.outboundList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          groupId: null,
          documentNumber: null,
          productionOrder: null,
          businessType: null,
          partNumber: null,
          materialName: null,
          itemSpecifications: null,
          actualQuantity: null,
          unit: null,
          storageLocation: null,
          confirmationDate: null,
          businessDate: null,
          documentType: null,
          creator: null,
          batchNumber: null,
          dispatchTime: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = this.$t('添加原材出库');
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getOutbound(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = this.$t('修改原材出库');
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateOutbound(this.form).then(response => {
                this.$modal.msgSuccess(this.$t('通用_修改成功'));
                this.open = false;
                this.getList();
              });
            } else {
              addOutbound(this.form).then(response => {
                this.$modal.msgSuccess(this.$t('通用_新增成功'));
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除原材出库编号为"' + ids + '"的数据项？').then(function() {
          return delOutbound(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess(this.$t('通用_删除成功'));
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/outbound/export', {
          ...this.queryParams
        }, `outbound_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
